<template>
	<view class="all">
	<view class="admin-info">
	  <view class="admin-avatar">
	    <image class="avatar" src="/static/14.jpg"></image>
	  </view>
	  <view class="admin-details">
	    <view class="admin-header">
	      <text class="username">admin</text>
	      <text class="role">超级管理员</text>
	    </view>
	  </view>
	</view>
	<view class="border-box">
	  <view class="title">
		  🪙 功能管理
	  </view>
	  <view class="menu">
	    <navigator url="/pages/user/user">
	      <view class="menu-item">
	        <image class="menu-icon" src="/static/15.jpg"></image>
	        <text class="menu-text">用户管理</text>
	      </view>
	    </navigator>
	      <navigator url="/pages/content/content">
			  <view class="menu-item">
	       <image class="menu-icon" src="/static/16.jpg"></image>
	       <text class="menu-text">内容管理</text>
		   </view>
	      </navigator>
	      <navigator url="/pages/booking/booking">
			   <view class="menu-item">
	       <image class="menu-icon" src="/static/17.jpg"></image>
	       <text class="menu-text">预约管理</text>
		   </view>
	      </navigator>
	      <navigator url="/pages/strategy/strategy">
			   <view class="menu-item">
	       <image class="menu-icon" src="/static/18.jpg"></image>
	       <text class="menu-text">攻略管理</text>
		   </view>
	      </navigator>
	      <navigator url="/pages/scenery/scenery">
			   <view class="menu-item">
	      <image class="menu-icon" src="/static/19.jpg"></image>
	      <text class="menu-text">景点管理</text>
		  </view>
	      </navigator>
	    </view>
		</view>
	
			<view class="border-box">
	<view class="title">
	  <navigator url="/pages/sceneManagement/sceneManagement" open-type="navigate">
	    <text class="username">编辑-景区管理</text>
	    <text class="arrow">&gt;</text>
	  </navigator>
	</view>
	<view class="title">
	  <navigator url="/pages/adminManagement/adminManagement" open-type="navigate">
	    <text class="username">系统管理员管理</text>
	    <text class="arrow">&gt;</text>
	  </navigator>
	</view>
	<view class="title">
	  <navigator url="/pages/changePassword/changePassword" open-type="navigate">
	    <text class="username">修改我的管理员密码</text>
	    <text class="arrow">&gt;</text>
	  </navigator>
	</view>
	<view class="title">
	  <navigator url="/pages/operationLog/operationLog" open-type="navigate">
	    <text class="username">管理员操作日志</text>
	    <text class="arrow">&gt;</text>
	  </navigator>
	</view>
			</view>
		<button class="logout-button" bindtap="logout">退出登录</button>
			</view>
</template>

<script>
</script>

<style>
	.all{
		background-color: #ececec;
	}
	.admin-info {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20px;
	  padding: 10px;
	  background-color: #55ffff;
	  border-radius: 8px;
	}
	
	.admin-avatar {
	  margin-right: 20px;
	}
	
	.avatar {
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  border: 2px solid #e0e0e0;
	}
	
	.admin-details {
	  flex: 1;
	}
	
	.admin-header {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	}
	
	.title {
	  display: flex; /* 使用 Flexbox 布局 */
	  align-items: center; /* 垂直居中对齐 */
	  padding: 10px 15px; /* 内边距 */
	  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
	  background-color: #f9f9f9; /* 背景颜色 */
	}
	
	.username {
	  font-size: 16px; /* 字体大小 */
	  color: #333; /* 字体颜色 */
	  flex-grow: 1; /* 占据剩余空间 */
	  margin-right: 10px; /* 与箭头之间的间距 */
	}
	
	.arrow {
	  font-size: 18px; /* 字体大小 */
	  color: #007aff; /* 字体颜色，这里使用了一种蓝色 */
	  font-family: Arial, sans-serif; /* 确保字体支持 Unicode 字符 */
	}
	
	.role {
	  font-size: 14px;
	  color: #ff5500;
	  margin-left: 2px;
	}
	.border-box {
	
	  background-color: #fff; /* 背景颜色 */
	
	}
.menu {
  display: flex;
/*  justify-content: space-between; /* 使用space-between使得子元素两端对齐，中间紧密排列 * */
  flex-wrap: wrap; /* 允许换行 */
  background-color: #f8f8f8; /* 背景颜色 */
  padding: 10px; /* 内边距 */
}

.menu-item {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 图标和文字在主轴上居中对齐 */
  width: 20%; /* 每个菜单项占据容器宽度的20%，这样一行可以放五个 */
  min-width: 100px; /* 设置最小宽度，确保在小屏幕上也能正常显示 */
  border: 1px solid #ccc;
  margin-bottom: 10px; /* 只在下方添加边距，使得模块在垂直方向上有一定的间隔 */
  padding: 10px;
  background-color: #fff; /* 每个菜单项的背景颜色 */
  border-radius: 8px; /* 圆角 */
}

.menu-icon {
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  margin-bottom: 5px; /* 图标和文字之间的间距 */
}

.menu-text {
  font-size: 14px; /* 文字大小 */
  color: #333; /* 文字颜色 */
}
.logout-button {
  background-color: #55ffff; /* 红色背景 */
  color: white; /* 白色文字 */
  padding: 10px 20px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  border: none; /* 无边框 */
  font-size: 16px; /* 字体大小 */
  margin: 20px; /* 外边距 */
  display: block; /* 块级元素，居中显示 */
  text-align: center; /* 文本居中 */
}
</style>